<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PolygonLayer, PointLayer, LineLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addScatter2",
    components: {L7MapWithGaode},
    setup() {
        const radius = 0.1;

        const pointOnCircle = (angle: number) => {
            return {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        properties: {},
                        geometry: {
                            type: 'Point',
                            coordinates: [
                                120.19382669582967 + Math.cos(angle) * radius,
                                30.258134 + Math.sin(angle) * radius
                            ]
                        }
                    }
                ]
            };
        }

        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(10, [120.19382669582967, 30.258134])

            const layer = new PointLayer({})
                .source(pointOnCircle(0))
                .shape('circle')
                .size(15) // default 1
                .active(false)
                .color('#2F54EB')
                .style({
                    stroke: '#fff',
                    strokeWidth: 2,
                    opacity: 1
                });
            scene.addLayer(layer);
            layer.setData(pointOnCircle(1000));

            const animateMarker = (timestamp: number) => {
                layer.setData(pointOnCircle(timestamp / 1000));
                scene.render();
                requestAnimationFrame(animateMarker);
            }
            animateMarker(0);
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
